<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="site/common::header('资讯列表')" />
</head>
<body>
    <!-- 头部 -->
    <th:block th:include="site/common::navigation" />
    <!-- 面包屑 -->
    <div class="breadcroumb-area ">
        <div class="">
            <div class="">
                <div class="">
                    <div class="breadcroumb-title">
                        <h1>资讯</h1>
                        <h5><a href="/">首页</a>/资讯</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="row">
        <div class="col-lg-8 col-md-10 col-10  m-auto">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="indexNewsTit mb-3" style="font-size: 14px;">
                        <ul>
                            <li th:each="category,stat:${categories}" th:id="${category.id}" th:text="${category.name}" th:if="${stat.first}" class="info_active">
                            <li th:each="category,stat:${categories}" th:id="${category.id}" th:text="${category.name}" th:unless="${stat.first}">
                        </ul>
                    </div>
                    <div class="row" id="list">
                    </div>
                    <div class="row">
                        <div class="col-12 more" style="margin: 30px 0;"><a class="newsMore" href="javascript:;">查看更多</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <th:block th:include="site/common::footer" />
</body>
<th:block th:include="site/common::js" />
<script>
    var category;
    var page = 1;

    $(document).ready(function () {
        category = $(".info_active").attr("id");
        loadNews(false);
    });

    $(".newsMore").click(function () {
        page += 1;
        loadNews(false);
    });

    $(".indexNewsTit").delegate("li","click",function(){
        category = $(this).attr("id");
        page = 1;
        loadNews(true);
        $(".indexNewsTit li").each(function () {
            $(this).removeClass("info_active");
            if($(this).attr("id") == category) {
                $(this).addClass("info_active");
            }
        })
    });

    function loadNews(empty) {
        var url = "/api/news/" + category + "/" + page;
        $.get(url, function(result){
            if(empty) {
                $("#list").empty();
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    var detail_url = "/news/" + result.rows[i]["id"];
                    var html = "<div class=\"row info_list\">" +
                        "<div class=\"col-lg-2 col-12\"><a href=\"" + detail_url + "\" target=\"_blank\"><img src=\"" + result.rows[i]["cover"] + "\"></a></div>" +
                        "<div class=\"col-lg-10\"><a href=\"" + detail_url + "\" target=\"_blank\"><h6>" + result.rows[i]["title"] + "</h6><p>" + result.rows[i]["description"] + "</p></a>" +
                        "<div><span>" + result.rows[i]["publish_time"] + "</span><a class=\"details \" href=\"" + detail_url + "\" target=\"_blank\">查看详情>>>></a></div></div>" +
                        "</div>";
                    $("#list").append(html);
                }
            }
        });
    }
</script>
</html>